<template>
  <ElDescriptions :column="1" border>
    <ElDescriptionsItem label="服务名称" :min-width="80">
      <MicroSelect v-model="data.microName" />
    </ElDescriptionsItem>
    <ElDescriptionsItem label="模块名称">
      <SeedSelect v-model="data.seedName" :micro-name="data.microName" />
    </ElDescriptionsItem>
    <ElDescriptionsItem label="功能名称">
      <ActionSelect v-model="data.actionName" :micro-name="data.microName" :seed-name="data.seedName" type="stat" />
    </ElDescriptionsItem>
  </ElDescriptions>
</template>
<script setup lang="ts">
  import { ElDescriptions, ElDescriptionsItem } from 'element-plus';
  import { PropsType } from '@/seed-application/components/stat/DefaultStat.vue';
  import { ref, watch } from 'vue';
  import { MicroSelect } from '@/views/components/MicroSelect';
  import { SeedSelect } from '@/views/components/SeedSelect';
  import { ActionSelect } from '@/views/components/ActionSelect';

  const props = defineProps<{modelValue?: PropsType}>()
  const emits = defineEmits(['update:modelValue'])

  const data = ref<PropsType>(props.modelValue || {actionName: void 0})

  watch(() => data.value.microName, () => data.value.seedName = void 0)
  watch(() => data.value.seedName, () => data.value.actionName = void 0)

  watch(() => props.modelValue, () => data.value = props.modelValue, {deep: true})
  watch(() => data.value, () => emits('update:modelValue', data.value), { deep: true })
</script>